<template>
  <view class="security-test-page">
    <!-- 导航栏 -->
    <u-navbar title="安保管理测试" back-icon="arrow-left" />
    
    <!-- 测试区域 -->
    <view class="test-section">
      <view class="section-title">API接口测试</view>
      
      <!-- 统计信息测试 -->
      <view class="test-card">
        <view class="test-title">统计信息测试</view>
        <u-button 
          type="primary" 
          text="获取统计信息" 
          @click="testStatistics"
          :loading="loading.statistics"
        />
        <view v-if="testResult.statistics" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.statistics) }}</text>
        </view>
      </view>
      
      <!-- 路线管理测试 -->
      <view class="test-card">
        <view class="test-title">路线管理测试</view>
        <u-button 
          type="primary" 
          text="获取路线列表" 
          @click="testRouteList"
          :loading="loading.routeList"
        />
        <view v-if="testResult.routeList" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.routeList) }}</text>
        </view>
      </view>
      
      <!-- 巡逻管理测试 -->
      <view class="test-card">
        <view class="test-title">巡逻管理测试</view>
        <u-button 
          type="primary" 
          text="获取巡逻列表" 
          @click="testPatrolList"
          :loading="loading.patrolList"
        />
        <view v-if="testResult.patrolList" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.patrolList) }}</text>
        </view>
      </view>
      
      <!-- 事件管理测试 -->
      <view class="test-card">
        <view class="test-title">事件管理测试</view>
        <u-button 
          type="primary" 
          text="获取事件列表" 
          @click="testEventList"
          :loading="loading.eventList"
        />
        <view v-if="testResult.eventList" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.eventList) }}</text>
        </view>
      </view>
      
      <!-- 访客管理测试 -->
      <view class="test-card">
        <view class="test-title">访客管理测试</view>
        <u-button 
          type="primary" 
          text="获取访客列表" 
          @click="testVisitorList"
          :loading="loading.visitorList"
        />
        <view v-if="testResult.visitorList" class="test-result">
          <text>结果：{{ JSON.stringify(testResult.visitorList) }}</text>
        </view>
      </view>
    </view>
    
    <!-- 组件测试区域 -->
    <view class="test-section">
      <view class="section-title">组件测试</view>
      
      <!-- 事件类型选择器测试 -->
      <view class="test-card">
        <view class="test-title">事件类型选择器测试</view>
        <EventTypeSelector
          v-model="testData.eventType"
          placeholder="选择事件类型"
          @change="onEventTypeChange"
        />
        <text class="test-info">选中值：{{ testData.eventType }}</text>
      </view>
      
      <!-- 严重程度选择器测试 -->
      <view class="test-card">
        <view class="test-title">严重程度选择器测试</view>
        <SeveritySelector
          v-model="testData.severity"
          placeholder="选择严重程度"
          @change="onSeverityChange"
        />
        <text class="test-info">选中值：{{ testData.severity }}</text>
      </view>
      
      <!-- 路线类型选择器测试 -->
      <view class="test-card">
        <view class="test-title">路线类型选择器测试</view>
        <RouteTypeSelector
          v-model="testData.routeType"
          placeholder="选择路线类型"
          @change="onRouteTypeChange"
        />
        <text class="test-info">选中值：{{ testData.routeType }}</text>
      </view>
      
      <!-- 巡逻频次选择器测试 -->
      <view class="test-card">
        <view class="test-title">巡逻频次选择器测试</view>
        <FrequencySelector
          v-model="testData.frequency"
          placeholder="选择巡逻频次"
          @change="onFrequencyChange"
        />
        <text class="test-info">选中值：{{ testData.frequency }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  getSecurityStatistics, 
  getSecurityRoutePage, 
  getSecurityPatrolPage, 
  getSecurityEventPage,
  getVisitorPage
} from '@/api/security'
import EventTypeSelector from '@/components/EventTypeSelector.vue'
import SeveritySelector from '@/components/SeveritySelector.vue'
import RouteTypeSelector from '@/components/RouteTypeSelector.vue'
import FrequencySelector from '@/components/FrequencySelector.vue'

// 响应式数据
const loading = reactive({
  statistics: false,
  routeList: false,
  patrolList: false,
  eventList: false,
  visitorList: false
})

const testResult = reactive({
  statistics: null,
  routeList: null,
  patrolList: null,
  eventList: null,
  visitorList: null
})

const testData = reactive({
  eventType: 'suspicious',
  severity: 2,
  routeType: 'patrol',
  frequency: 'hourly'
})

// API测试方法
const testStatistics = async () => {
  try {
    loading.statistics = true
    const response = await getSecurityStatistics()
    testResult.statistics = response
    uni.showToast({
      title: '统计信息获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取统计信息失败:', error)
    testResult.statistics = { error: error.message }
    uni.showToast({
      title: '获取统计信息失败',
      icon: 'none'
    })
  } finally {
    loading.statistics = false
  }
}

const testRouteList = async () => {
  try {
    loading.routeList = true
    const response = await getSecurityRoutePage({
      pageNum: 1,
      pageSize: 10
    })
    testResult.routeList = response
    uni.showToast({
      title: '路线列表获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取路线列表失败:', error)
    testResult.routeList = { error: error.message }
    uni.showToast({
      title: '获取路线列表失败',
      icon: 'none'
    })
  } finally {
    loading.routeList = false
  }
}

const testPatrolList = async () => {
  try {
    loading.patrolList = true
    const response = await getSecurityPatrolPage({
      pageNum: 1,
      pageSize: 10
    })
    testResult.patrolList = response
    uni.showToast({
      title: '巡逻列表获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取巡逻列表失败:', error)
    testResult.patrolList = { error: error.message }
    uni.showToast({
      title: '获取巡逻列表失败',
      icon: 'none'
    })
  } finally {
    loading.patrolList = false
  }
}

const testEventList = async () => {
  try {
    loading.eventList = true
    const response = await getSecurityEventPage({
      pageNum: 1,
      pageSize: 10
    })
    testResult.eventList = response
    uni.showToast({
      title: '事件列表获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取事件列表失败:', error)
    testResult.eventList = { error: error.message }
    uni.showToast({
      title: '获取事件列表失败',
      icon: 'none'
    })
  } finally {
    loading.eventList = false
  }
}

const testVisitorList = async () => {
  try {
    loading.visitorList = true
    const response = await getVisitorPage({
      pageNum: 1,
      pageSize: 10
    })
    testResult.visitorList = response
    uni.showToast({
      title: '访客列表获取成功',
      icon: 'success'
    })
  } catch (error) {
    console.error('获取访客列表失败:', error)
    testResult.visitorList = { error: error.message }
    uni.showToast({
      title: '获取访客列表失败',
      icon: 'none'
    })
  } finally {
    loading.visitorList = false
  }
}

// 组件事件处理
const onEventTypeChange = (option) => {
  console.log('事件类型选择器变化:', option)
  uni.showToast({
    title: `选择了事件类型：${option.label}`,
    icon: 'none'
  })
}

const onSeverityChange = (option) => {
  console.log('严重程度选择器变化:', option)
  uni.showToast({
    title: `选择了严重程度：${option.label}`,
    icon: 'none'
  })
}

const onRouteTypeChange = (option) => {
  console.log('路线类型选择器变化:', option)
  uni.showToast({
    title: `选择了路线类型：${option.label}`,
    icon: 'none'
  })
}

const onFrequencyChange = (option) => {
  console.log('巡逻频次选择器变化:', option)
  uni.showToast({
    title: `选择了巡逻频次：${option.label}`,
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.security-test-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.test-section {
  padding: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
}

.test-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .test-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .test-result {
    margin-top: 20rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 8rpx;
    
    text {
      font-size: 24rpx;
      color: #666;
      word-break: break-all;
    }
  }
  
  .test-info {
    display: block;
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #666;
  }
}
</style>
